/*
 * @Author: AiLjx
 * @Date: 2022-05-16 18:05:39
 * @LastEditors: AiLjx
 * @LastEditTime: 2022-07-25 22:14:28
 */
import {
    // unstable_HashRouter as HashRouter,
    HashRouter,
    Route,
    Routes,
    Navigate,
} from "react-router-dom";
import AuthRoute from "@/components/AuthRoute";
import { history } from "./utils/history";
// 导入必要组件
import { lazy, Suspense } from "react";

// 按需导入路由组件
const Login = lazy(() => import("./pages/Login"));
const GeekLayout = lazy(() => import("./pages/Layout"));
const Home = lazy(() => import("./pages/Home"));
const Article = lazy(() => import("./pages/Article"));
const Publish = lazy(() => import("./pages/Publish"));
function App() {
    return (
        <>
            <HashRouter history={history}>
                <Suspense
                    fallback={
                        <div
                            style={{
                                textAlign: "center",
                                marginTop: 200,
                            }}>
                            loading...
                        </div>
                    }>
                    <div className='App'>
                        <Routes>
                            {/* 鉴权路由 */}
                            <Route
                                path='/'
                                element={
                                    <AuthRoute>
                                        <GeekLayout />
                                    </AuthRoute>
                                }>
                                <Route index element={<Home />}></Route>
                                <Route
                                    path='article'
                                    element={<Article />}></Route>
                                <Route
                                    path='publish'
                                    element={<Publish />}></Route>
                            </Route>

                            <Route path='/login' element={<Login />}></Route>

                            <Route
                                path='*'
                                element={<Navigate to='/' />}></Route>
                        </Routes>
                    </div>
                </Suspense>
            </HashRouter>
        </>
    );
}

export default App;
